<template>
  <view class="productSort">
    <view class="navTitleBox">
      <u-status-bar></u-status-bar>
      <view class="navTitle">全部分类</view>
    </view>
    <u-sticky>
      <view class="">
        <view class="search">
          <view class="search-b" @click="goGoodSearch()">
            <u-input v-model="keyword" placeholder="搜索商品" disabled
              ><text class="dark iconfont icon-search" slot="prefix"></text
            ></u-input>
          </view>
        </view>
      </view>
    </u-sticky>
    <view class="category-layout">
      <view class="aside">
        <view
          class="item acea-row row-center-wrapper LeftItem"
          :class="categoryDivindex === navActive ? 'on' : ''"
          v-for="(item, categoryDivindex) in category"
          :key="categoryDivindex"
          @click="asideTap(categoryDivindex)"
        >
          <text :class="categoryDivindex === navActive ? 'onText' : ''">{{
            item.cateName
          }}</text>
        </view>
      </view>
      <view class="conter">
        <view v-for="(item, eq) in category" :key="eq">
          <view class="listw" v-if="eq === navActive">
            <view class="title acea-row row-center-wrapper" ref="title">
              <view class="line"></view>
              <view class="name">{{ item.cateName }}</view>
              <view class="line"></view>
            </view>
            <view class="list acea-row">
              <view
                class="item acea-row row-column row-middle"
                v-for="(child, categoryIndex) in item.children"
                :key="categoryIndex"
                @click="goGoodsList(child)"
              >
                <view class="picture"><image :src="child.pic" /></view>
                <view class="name line1">{{ child.cateName }}</view>
              </view>
            </view>
          </view>
        </view>
      </view>
      <view style="height: 100rpx"></view>
    </view>
  </view>
</template>
<script>
import { getCategory } from "@/api/store";
import { trim } from "@/utils";

export default {
  name: "GoodsClass",
  components: {},
  props: {},
  data: function () {
    return {
      category: [],
      navActive: 0,
      addressName: "",
      search: "",
      lock: false,
    };
  },
  watch: {
    "$yroute.query.id": function (n) {
      if (n) {
        this.activeCateId(n);
      }
    },
  },
  onShow(){
    const storageKey = 'category_params'
    uni.getStorage({
      key: storageKey,
      success: (res) => {
        console.log('接收到的参数:', res.data.params);
        if(res.data.params){
          this.addressName = res.data.params.name;
        }
        // 使用后立即清除缓存
        uni.removeStorage({ key: storageKey });
      }
    });
  },
  onLoad(options) {
    if (options.name) {
      console.log("路径获取参数")
      this.addressName = options.name;
    }
  },
  mounted: function () {
    this.loadCategoryData();
  },
  methods: {
    goGoodSearch() {
      this.$yrouter.push("/packageShop/pages/shop/GoodSearch/index");
    },
    goGoodsList(child) {
      this.$yrouter.push({
        path: "/packageShop/pages/shop/GoodsList/index",
        query: { id: child.id, title: child.cateName },
      });
    },
    activeCateId(n) {
      let index = 0;
      n = parseInt(n);
      if (!n) return;
      this.category.forEach((cate, i) => {
        if (cate.id === n) index = i;
      });
      if (index !== this.navActive) {
        this.asideTap(index);
      }
    },
    loadCategoryData() {
      getCategory().then((res) => {
        this.category = res.data;
        this.$nextTick(() => {
          if (this.$yroute.query.id) {
            this.activeCateId(this.$yroute.query.id);
          }
        });
        this.category.forEach((i, index) => {
          if (this.addressName == i.cateName) {
            this.navActive = index;
          }
        });
      });
    },
    submitForm: function () {
      var val = trim(this.search);
      if (val) {
        this.$yrouter.push({
          path: "/packageShop/pages/shop/GoodsList/index",
          query: { s: val },
        });
        setTimeout(() => (this.search = ""), 500);
      }
    },
    asideTap(index) {
      this.navActive = index;
    },
  },
};
</script>

<style lang="less">
.productSort {
  height: 100%;
  overflow: hidden;
}
.category-layout{
  height: calc( 100% - 140rpx);
  overflow-y: auto;
  box-sizing: border-box;
}
.on {
  color: #FF5900 !important;
  border-left: 0rpx solid #FF5900 !important;
}
.onText {
  display: inline-block;
  width: 100%;
  border-left: 6rpx solid #FF5900;
}
.LeftItem {
  height: 96rpx !important;
}
</style>
